<template>
	<view class="manageQrcode" :style="{position:noScroll?'fixed':'static'}">
		<view class="searchbox">
			<view class="searchinput">
				<image src="../../../static/svg/magnifier.svg" class="icon"></image>
				<input type="text" placeholder="请输入WIFI名/昵称/名称" />
			</view>
			<button class="searchBtn" @click="searchBtn">搜索</button>
		</view>

		<view class="searchResult" v-for="item in wifiList" :key="item.wfId">
			<div class="wifiItem">
				<div class="qrcodeInfo">
					<div class="infobox">
						<view class="txt title">{{ item.name }}</view>
						<view class="txt">{{ item.ssId }}</view>
						<view class="txt">今日有效连接 20 次</view>
						<view class="txt">累计有效连接 66 次</view>
					</div>
					<image src="../../../static/img/green_01.png" class="qrcode"></image>
				</div>
				<div class="operate">
					<div class="btn" @click="showDialog(item.wfId)">转移</div>
					<div class="btn bgc" @click="edit(item.wfId)">修改</div>
					<div class="btn bgc" @click="manage(item.wfId)">管理</div>
					<div class="btn del" @click="del(item.wfId)">删除</div>
				</div>
			</div>
		</view>

		<view class="dialog" v-if="dialog">
			<view class="d_main">
				<view class="title">
					请输入转移目标用户ID
				</view>
				<view class="content">
					<div class="inputBox">
						<text>ID：</text>
						<input type="text" placeholder="请输入用户ID" />
					</div>
				</view>
				<view class="btnBox">
					<view class="btn" @click="cancel">取消</view>
					<view class="btn bgc" @click="determine">确定</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import { getMyWifi, deleteWifi } from '@/api/login/login'
	
	export default {
		data() {
			return {
				dialog: false,
				noScroll:false,
				// WiFi列表信息
				wifiList: [],
			}
		},
		onShow() {
			// 获取我的wifi
			let userInfo = uni.getStorageSync("userInfo");
			let userInfoJson = JSON.parse(userInfo);
			this.getMyWifiList(userInfoJson.openId);
		},
		onLoad() {
			
		},
		methods: {
			searchBtn() {
				
			},
			
			getMyWifiList(openId) {
				let params = {
					openId: openId
				}
				getMyWifi(params).then(res => {
					if (res.code == '200') {
						this.wifiList = res.data;
					} 
				});
			},
			
			showDialog() {
				this.noScroll=true
				this.dialog = true
			},
			determine() {
				this.noScroll=false
				this.dialog = false
			},
			cancel() {
				this.noScroll=false
				this.dialog = false
			},
			edit(wfId) {
				uni.setStorageSync('editQrCodeWfId', wfId)
				uni.navigateTo({
					url: "/pages/home/createQrcode/editQrcode"
				}).then(_ => {
					uni.setNavigationBarTitle({
						title: '修改我的WIFI码'
					})
				})
			},
			del(wfId) {
				let userInfo = uni.getStorageSync("userInfo");
				let userInfoJson = JSON.parse(userInfo);
				let query = {
					wfId: wfId,
					openId: userInfoJson.openId
				}
				uni.showModal({
					title: '警告',
					content: '是否确认删除',
					success(checkRes) {
						if (checkRes.confirm) {
							deleteWifi(query).then(res2 => {
								if (res2.code == '200') {
									uni.hideLoading();
									uni.redirectTo({
										url:'/pages/home/manageQrcode/manageQrcode'
									})
								} else {
									uni.hideLoading();
								}
							});
						}
					}
				})	
			},
			manage(wfId) {
				uni.setStorageSync('editQrCodeWfId', wfId)
				uni.navigateTo({
					url: "/pages/home/manageQrcode/bill/bill"
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	@import '../../../static/style/mixin.scss';

	.manageQrcode {
		@include bg2;
		min-height: 100vh;
		padding-top: 20upx;

		.searchbox {
			@include w_box;
			display: flex;
			justify-content: space-between;

			.searchinput {
				display: flex;
				align-items: center;
				width: 500upx;
				padding: 0 20upx;
				height: 60upx;
				border-radius: 30upx;
				background-color: #d4d4d4;

				.icon {
					width: 40upx;
					height: 40upx;
					margin: 10upx 20upx 10upx 0;
				}
			}

			.searchBtn {
				width: 120upx;
				height: 60upx;
				background-color: #d4d4d4;
				border-radius: 30upx;
				font-size: 25upx;
				@include cc;
			}
		}

		.searchResult {
			width: 720upx;
			margin: 20upx auto;
			border-radius: 10upx;
			background-color: #fff;
			padding: 20upx;
			box-sizing: border-box;

			.wifiItem {
				padding: 20upx;

				.qrcodeInfo {
					display: flex;

					.infobox {
						width: 480upx;

						.txt {
							margin-bottom: 15upx;
							font-size: 25upx;
						}

						.title {
							font-weight: 600;
							font-size: 35upx;
						}
					}

					.qrcode {
						width: 200upx;
						height: 200upx;
					}
				}


				.operate {
					display: flex;
					justify-content: space-between;
					margin-top: 30upx;

					.btn {
						width: 150upx;
						height: 60upx;
						border-radius: 10upx;
						@include cc;
						background-color: aqua;
					}

					.bgc {
						background-color: aquamarine;
					}

					.del {
						background-color: #ff2a0e;
					}
				}

			}
		}

		.dialog {
			width: 750upx;
			height: 120vh;
			background-color: #00000050;
			position: fixed;
			top: 0;
			left: 0;
			@include cc;
			transform: translateY(-300upx);
			z-index: 5;

			.d_main {
				width: 500upx;
				border-radius: 10upx;
				background-color: #fff;

				.title {
					@include cc;
					padding-top: 30upx
				}

				.content {
					@include cc;

					.inputBox {
						width: 80%;
						display: flex;
						background-color: #d4d4d4;
						padding: 10upx 20upx;
						border-radius: 10upx;
					}

					margin: 30upx 0;
				}

				.btnBox {
					display: flex;

					.btn {
						width: 50%;
						height: 80upx;
						@include cc;
					}

					.bgc {
						background-color: #00ffff30;
						border-radius: 10upx;
					}
				}
			}
		}
	}
</style>
